<template>
    <div class="numinput">

        <div class="decrease" @click="dec()">-</div>
        <input ref="inp"   @input="clearNum" class="inp" type="number" :value="value">
        <div class="add" @click="add()">+</div>

    </div>
</template>

<script>
    import {clearNoNumWithInt} from '@/common/js/num'
    export default {
        props: {
            value: {
                type:Number,
                default:0
            }
        },
        data() {
            return {

            }
        },
        methods:{
            update(val){
                this.$emit("input",parseInt(val))
                this.$emit("change",parseInt(val))
            },
            clearNum(e){
                // console.log(this.$refs.inp.value)
                let num = this.$refs.inp.value
                if(this.$refs.inp.value){
                    num = clearNoNumWithInt(num)
                    this.$refs.inp.value = num
                }else {
                    num =1
                }
                this.update(num)

            },
            add(){
                let num = this.value + 1
                this.update(num)
            },
            dec(){
                if(this.value>0){
                    let num = this.value - 1
                    this.update(num)
                }

            }
        }
    }
</script>

<style scoped lang="stylus">
    .numinput
        display flex
        align-items center
        background-color white
        width 85px
        height 22px
        .inp
            border: none
            -webkit-appearance: none ;
            -webkit-user-select: text
            height 90%
            outline none
            border-radius 0
            border-top 1px solid rgba(161,161,161,0.7);
            border-bottom 1px solid rgba(161,161,161,0.7);
            font-size 13px
            text-align center
            color #4E3D07
            width 50%
        .add, .decrease
            width 25%
            font-size 13px
            color $font-color-light
            border 1px solid rgba(161,161,161,0.7);
            height 100%
            display flex
            align-items center
            justify-content center
            text-align center
        .add
            border-radius 0 2.5px 2.5px 0
        .decrease
            border-radius 2.5px 0 0 2.5px


</style>